<template>
    <div id="home">

             <header>
                <router-link to="/Search">
                        <span class="iconfont icon-sousuo"></span>
                        <input type="text" name="" placeholder="搜索商家、商品名称"/>
                </router-link>
                    
            </header>


           <div class="lunbo">

            <mt-swipe :auto="0">
                <mt-swipe-item>
                    <a href="javascript:"><img src="../assets/images/img1.jpeg"/><span>美食</span></a>
                    <a href="javascript:"><img src="../assets/images/img2.jpeg"/><span>甜品饮品</span></a>
                    <a href="javascript:"><img src="../assets/images/img3.jpeg"/><span>商超遍历</span></a>
                    <a href="javascript:"><img src="../assets/images/img4.jpeg"/><span>预定早餐</span></a>
                    <a href="javascript:"><img src="../assets/images/img5.jpeg"/><span>果蔬生鲜</span></a>
                    <a href="javascript:"><img src="../assets/images/img6.jpeg"/><span>新店特惠</span></a>
                    <a href="javascript:"><img src="../assets/images/img7.jpeg"/><span>准时达</span></a>
                    <a href="javascript:"><img src="../assets/images/img8.jpeg"/><span>简餐</span></a>
                </mt-swipe-item>
                <mt-swipe-item>
                    <a href="javascript:"><img src="../assets/images/img1.jpeg"/><span>美食</span></a>
                    <a href="javascript:"><img src="../assets/images/img2.jpeg"/><span>甜品饮品</span></a>
                    <a href="javascript:"><img src="../assets/images/img3.jpeg"/><span>商超遍历</span></a>
                    <a href="javascript:"><img src="../assets/images/img4.jpeg"/><span>预定早餐</span></a>
                    <a href="javascript:"><img src="../assets/images/img5.jpeg"/><span>果蔬生鲜</span></a>
                    <a href="javascript:"><img src="../assets/images/img6.jpeg"/><span>新店特惠</span></a>
                    <a href="javascript:"><img src="../assets/images/img7.jpeg"/><span>准时达</span></a>
                    <a href="javascript:"><img src="../assets/images/img8.jpeg"/><span>简餐</span></a>
                </mt-swipe-item>
            </mt-swipe>

            <img src="../assets/images/hb.png" alt="" class="hb"/>
        </div>

    <div class="content">
        <div class="notice">
           <ul>
                <li>
                   <div class="info">
                        <strong>满20减10</strong>
                        <span>广深大聚惠</span>
                   </div>
                   <img src="../assets/images/list1.png" alt=""/>
               </li>
                <li>
                   <div class="info">
                        <strong>霸王餐</strong>
                        <span>领20元红包</span>
                   </div>
                   <img src="../assets/images/list1.png" alt=""/>
               </li>
               <li>
                   <div class="info">
                        <strong>营养快餐</strong>
                        <span>15元吃饱</span>
                   </div>
                   <img src="../assets/images/list2.png" alt=""/>
               </li>
                <li>
                   <div class="info">
                        <strong>立减15元</strong>
                        <span>周三菜系日</span>
                   </div>
                   <img src="../assets/images/list2.png" alt=""/>
               </li>
           </ul>
       </div>

       <section class="shoplists">
        <h3 class="tj">推荐商家</h3>
              
            <section class="list clearfix" v-for="item in list">    
                <router-link :to="'/detail/'+item._id">
                    <div class="list-img"><img :src="'http://127.0.0.1:2000/'+item.img" alt=""/></div>
                    <div class="listtxt">
                        <h3>{{item.title}}} </h3>
                        <div class="txt1"><img src="../assets/images/start.jpg"/>月售744单</div>
                        <div class="txt2 clearfix">
                            <div class="txt2-money">
                                <span>¥{{item.price}}起送  /</span>
                                <span>配送费¥3 /</span>
                                <span>¥13/人</span>
                            </div>
                            <div class="txt2-time">
                                <span>2.48km</span><span>47分钟</span>
                            </div>
                        </div>
                    </div>
                </router-link>
          </section>
               
          
        </section>
       
    </div>


    </div>
</template>

<script>
//引入store文件放入组件中
import store from '../store/store.js';
    export default {
        name: 'home',
        data(){
            return{
               list:[]
            }
        },
        methods:{
            getData(){
                var that=this;
                var url="http://127.0.0.1:2000/api/product";
                this.$http.get(url).then(function(res){
                    that.list=res.body.result;
                    store.commit("addshop",res.body.result);
                },function(err){
                    console.log(err);
                })
            }
        },
        computed:{
            
        },
         mounted(){
             if(store.state.shoplist.length>0){
                 this.list=store.state.shoplist[0];
             }
             else{
                this.getData();
             }

        },
        store  //属性简写
    }
</script>